<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <body>
        <f:metadata>
            <f:viewParam name="verify" value="#{profileController.current.emailHash}" valueChangeListener="#{profileController.emailHashVerify}"/>
        </f:metadata>
        <ui:composition template="./template.xhtml">
            <ui:define name="title">
                #{bundle.Register}
            </ui:define>
            <ui:define name="body">
                <div class="center50">
                    <p:panel>
                        <h:form id="userform" >
                            <h:panelGrid columns="3"   cellpadding="10">
                                <h:outputLabel value="#{bundle.User}"/>
                                <h:outputLabel rendered="#{frontController.islogedIn()}" value="#{profileController.current.name}"/> 
                                <h:outputLabel rendered="#{frontController.islogedIn()}"/>
                                <p:inputText rendered="#{!frontController.islogedIn()}" 
                                             id="name" value="#{profileController.current.name}" 
                                             label="#{bundle.User}"
                                             validator="#{profileController.validateUserName}"
                                             >
                                    <p:ajax event="blur" update="msgname" />
                                </p:inputText>
                                <p:message rendered="#{!frontController.islogedIn()}" id="msgname" for="name"/>  
                                <h:outputLabel rendered="#{frontController.islogedIn()}" value="#{bundle.OldPassword}"/>
                                <p:inputText id="oldpass" 
                                             rendered="#{frontController.islogedIn()}" 
                                             value="#{profileController.oldpassword}" 
                                             label="#{bundle.OldPassword}"
                                             validator="#{profileController.validateOldPassword}">
                                    <p:ajax event="blur" update="msgoldpass showpass :userform" oncomplete="showPass()"/>
                                </p:inputText>
                                <p:message rendered="#{frontController.islogedIn()}" id="msgoldpass" for="oldpass"/>  
                            </h:panelGrid>
                            <script>
                                function showPass()
                                {
                                    var t=setTimeout(function(){
                                    var val=document.getElementById("userform:showpass").value;
                                    var el=document.getElementById("userform:passGrid");
                                    $(el).css("display",val=="true"?"":"none");clearTimeout(t);
                                    },1);
                                }
                            </script>
                            <h:inputHidden id="showpass" value="#{profileController.changePassword}" />
                            <p:commandButton value="Change password" action="#{profileController.prepareToChangePassword()}" style="display: #{profileController.oldPasswordValid ?'':'none'}" update="passGrid"/>
                            <h:panelGrid id="passGrid" columns="3" cellpadding="10" style="display: #{profileController.changePassword ?'':'none'}">
                                <h:outputLabel value="#{bundle.Password}"/><p:inputText  id="pass" value="#{profileController.password}" label="#{bundle.Password}" validator="#{profileController.validatePasswordSize}">
                                    <p:ajax event="blur" update="msgpass" process="pass" />
                                </p:inputText>
                                <p:message id="msgpass" for="pass"/> 
                                <h:outputLabel value="#{bundle.Password2}"/><p:inputText id="pass2" value="#{profileController.password2}" label="#{bundle.Password}" validator="#{profileController.validatePasswordSize}">
                                    <p:ajax event="blur" update="msgpass2" />
                                </p:inputText>
                                <p:message id="msgpass2" for="pass2"/>     
                            </h:panelGrid>
                            <h:panelGrid columns="3"   cellpadding="10">        
                                <h:outputLabel value="#{bundle.Email}"/><p:inputText id="email" value="#{profileController.email}" label="#{bundle.Email}" >    
                                    <p:ajax event="blur" update="msgemail" />
                                </p:inputText>
                                <p:message id="msgemail" for="email"/>     
                                <h:outputLabel value="#{bundle.Group}"/><h:outputLabel value="#{profileController.current.group.name}" />    
                                <h:outputLabel/>
                            </h:panelGrid>
                            <h:panelGrid columns="2" cellpadding="10">
                                <h:outputLabel value="#{bundle.DisplayName}"/><p:inputText value="#{profileController.current.displayname}" id="dn" label="#{bundle.DisplayName}"/> 
                                <h:outputLabel value="#{bundle.ContactName}"/><p:inputText value="#{profileController.current.contact}" label="#{bundle.ContactName}"/>    
                                <h:outputLabel value="#{bundle.Address}"/><p:inputText value="#{profileController.current.address}" label="#{bundle.Address}"/>    
                                <h:outputLabel value="#{bundle.Type}"/><p:selectOneMenu value="#{profileController.current.type}" label="#{bundle.Type}">
                                    <f:selectItems  value="#{userNameTypeBean.userNameTypeValues}" var="t"
                                                    itemLabel="#{t.label}" itemValue="#{t.value}"/>
                                </p:selectOneMenu>
                                <h:outputLabel value="#{bundle.HistoryLength}"/><p:spinner max="100" min="0" value="#{profileController.current.historyLength}" id="histlength" label="#{bundle.HistoryLangth}"/> 
                            </h:panelGrid>    
                            <p:panel rendered="#{frontController.islogedIn()}">
                                <p:graphicImage id="useravatar" height="50" width="50" value="/upload/#{profileController.current.avatarImage()}" />
                                <p:commandButton value="Select" onclick="fsd.show()">
                                    <f:setPropertyActionListener target="#{profileController.current.avatar}" value="#{fileUploadController.selectedFile}" />
                                </p:commandButton>
                            </p:panel>
                            <p:panel  rendered="false">
                                <p:messages showDetail="true"/>  
                                <p:captcha label="Captcha" />  
                                <p:commandButton value="Check" ajax="false"  
                                                 actionListener="#{captchaBean.submit}" />  
                            </p:panel>
                            <p:commandButton value="Save"  action="#{profileController.saveInProfile()}" ajax="false" />
                        </h:form>
                    </p:panel>
                    <p:messages id="msgs" showDetail="true"/>  
                </div>
                <ui:include src="sections/avatarSelectDialog.xhtml"/>
            </ui:define>
        </ui:composition>
    </body>
</html>